<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>comment</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../assets/css/public.css"/>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../assets/js/ajax/api.js"></script>
</head>
<style>


</style>

<body>
<div id="app">
    <el-card class="box-card">
        <template>
            <div style="text-align: right;">
                <el-button type="primary" @click="savedialogVisible = true" size="small" plain>添加</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="编号">
                                <span>{{ props.row.id }}</span>
                            </el-form-item>
                            <el-form-item label="叙事场地">
                                <span>{{ props.row.placeId }}</span>
                            </el-form-item>
                            <el-form-item label="星级">
                                <el-rate
                                        v-model="props.row.grade"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                </el-rate>

                            </el-form-item>
                            <el-form-item label="用户名">
                                <span>{{ props.row.userId }}</span>
                            </el-form-item>
                            <el-form-item
                                    label="评论">
                                <span>{{ props.row.content }}</span>

                            </el-form-item>
                            <el-form-item label="点评时间">
                                <span>{{ props.row.date }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="叙事场地"
                        prop="placeId">
                </el-table-column>
                <el-table-column
                        label="星级">
                    <template slot-scope="scope">
                        <el-rate
                                v-model="scope.row.grade"
                                disabled
                                show-score
                                text-color="#ff9900">
                        </el-rate>
                        <!--                        <span>{{scope.row.grade}}</span>-->
                    </template>

                </el-table-column>
                <el-table-column
                        label="用户名"
                        prop="userId">
                </el-table-column>

                <el-table-column
                        label="点评时间"
                        prop="date">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="deleteData(scope.row.typeId)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="editType(scope.row.typeId)">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="block pagehelp">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="page.pagesizes"
                        :page-size="page.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.total">
                </el-pagination>
            </div>
        </template>
    </el-card>
    <el-dialog class=""
               title="添加"
               :visible.sync="savedialogVisible"
               width="30%"
               :before-close="handleClose">
        <el-form label-width="80px" :model="saveform">
            <el-form-item label="场地编号:">
                <el-input v-model="saveform.placeId"></el-input>
            </el-form-item>
            <el-form-item label="星级:">
                <el-input v-model="saveform.grade"></el-input>
            </el-form-item>
            <el-form-item label="点评内容:">
                <el-input v-model="saveform.content"></el-input>
            </el-form-item>
            <el-form-item label="用户名:">
                <el-input v-model="saveform.userId"></el-input>
            </el-form-item>
            <el-form-item label="点评时间:">
                <el-input v-model="saveform.date"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            savedialogVisible: false,
            page: {
                pagesizes: [5, 10, 15, 20, 50],
                pagesize: 10,
                total: 100
            },
            saveform: {
                placeId: '',
                grade: '',
                content: '',
                userId: '',
                date: ''
            }
        },
        mounted() {
            console.log("11")
            this.getData(this.page.pagesize, 1)


        },
        methods: {

            t() {

                this.getData(this.page.pagesize, 1);
            },
            handleSizeChange(val) {
                this.page.pagesize = val
                this.getData(this.page.pagesize, 1)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(this.page.pagesize, val)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmit() {
                console.log("表单提交")
            },
            getData(pageSize, pageNum) {
                let arg = {
                    pageSize,
                    pageNum
                }
                var than = this;
                api.post('comment/list', arg).then(res => {
                    console.log('结果', res);
                    than.tableData = res.list;
                    than.page.total = res.total;

                })

                // let data = StandardPost_get('comment/list', arg)
                // this.tableData = data.list;
                // this.page.total = data.total;

            }
        }

    })
</script>
</html>
